<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1. 划定vue生效的范围 -->
  <div id="app">
    <input type="text" v-model="msg">
    <p>输入框中的内容：{{msg}}</p>
    <hr>
    <p>双花括号：{{}}，文本插值，可以用来显示变量、运算结果、调用函数</p>
    <p>age:{{age}}</p>
    <p>数组长度：{{arr1.length}}</p>
    <p>是否登录：{{isLogin?'已登录':'未登录'}}</p>
    <p>调用函数：{{eat()}}</p>
    <p>访问对象属性：{{obj1.name}}</p>
    <p>访问对象属性：{{obj1.age}}</p>
    <hr>
    <p>vue的指令，格式： v-xxx。放在标签属性的位置上</p>
    <p>v-text：渲染文本</p>
    <h1 v-text="msg"></h1>
    <p>v-text：渲染带有标签格式的文本</p>
    <h1 v-html="info"></h1>
  </div>
  <!-- 2.引入vue源码 -->
  <script src="../vue.js"></script>
  <!-- 3.写自己的js代码 -->
  <script>
    // 1. 初始化一个vue实例
    let vm = new Vue({
      // 2.绑定元素(挂载)
      el: '#app',
      // 3. 初始化数据,所有由vue管理的数据，都在这里初始化
      data: {
        msg: '我是一段文字',
        info: '<mark><i>666</i></mark>',
        age: 18,
        arr1: [1,2,3,4,5],
        isLogin: false,
        obj1: {
          name: '马保国',
          age: 70
        }
      },
      // 函数都在这
      methods: {
        eat() {
          console.log('中午吃什么？hotpot');
          return '中午吃什么？hotpot'
        }
      },
    })
  </script>
</body>
</html>